<template>
  <div class="row q-pa-md">
    <div class="column col">
      <div class="column q-ma-md">
        <div class="section-title">{{ $t('profile.about') }}</div>
        <div class="section-content q-pa-md" style="font-size: 16px">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna
        </div>
      </div>
      <div class="column q-ma-md" v-if="socialLinks && socialLinks.length > 0">
        <div class="section-title">{{ $t('profile.socialLinks') }}</div>
        <div class="section-content row q-pa-md">
          <q-btn
            round
            v-for="link in socialLinks"
            :key="link.id"
            :color="link.type"
            :icon="`mdi-${link.type}`"
            :href="link.link"
            target="_blank"
            class="q-mr-md"
          />
          <q-btn
            round
            icon="mdi-plus"
            text-color="accent"
            color="primary"
            @click="gotoAccountSetting"
          />
        </div>
      </div>
      <div class="column q-ma-md">
        <div class="section-title">{{ $t('profile.compliments') }}</div>
        <div class="section-content row q-pa-md">
          <ComplimentItem
            class="q-mr-md text-sub"
            v-for="item in compliemnts"
            :key="item.id"
            :item="item"
            :readonly="true"
          />
        </div>
      </div>
    </div>
    <div class="column col">
      <div class="column q-ma-md">
        <div class="section-title">{{ $t('profile.stats') }}</div>
        <div class="section-content q-pa-md">
          <div class="row justify-around no-wrap">
            <div class="stats-item column items-center justify-center">
              <div class="stats-value">{{ currentUser!.viewCount }}</div>
              <div class="stats-label">{{ $t('profile.profileViews') }}</div>
            </div>
            <div class="stats-item column items-center justify-center">
              <div class="stats-value">{{ currentUser!.followersCount }}</div>
              <div class="stats-label">{{ $t('profile.followers') }}</div>
            </div>
            <div class="stats-item column items-center justify-center">
              <div class="stats-value">{{ currentUser!.complimentsCount }}</div>
              <div class="stats-label">{{ $t('profile.compliments') }}</div>
            </div>
            <div class="stats-item column items-center justify-center">
              <div class="stats-value">{{ currentUser!.videosCount }}</div>
              <div class="stats-label">{{ $t('profile.videos') }}</div>
            </div>
            <div class="stats-item column items-center justify-center">
              <div class="stats-value">{{ currentUser!.audiosCount }}</div>
              <div class="stats-label">{{ $t('profile.audios') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import SocialLink from 'src/models/SocialLink';
import { computed, ref } from 'vue';
import ComplimentItem from 'components/ComplientItem.vue';
import { useGlobalStore } from 'src/stores/global-store';
import { useUserStore } from 'src/stores/user-store';
const globalStore = useGlobalStore();
const userStore = useUserStore();
const compliemnts = computed(() => globalStore.complimentConfig);
const currentUser = computed(() => userStore.currentUser);
const socialLinks = computed<SocialLink[]>(() => userStore.socialLinks);

console.log(compliemnts.value);
function gotoAccountSetting() {
  globalStore.showSettingDialog = true;
}
</script>
<style lang="sass" scoped>

.section-title
  color: #ACACAC
  font-size: 14px
  font-weight: bold
.section-content
  background-color: #1c1c1c
.stats-item
  width: 116px
  height: 74px
  background-color: #242424
  .stats-value
    font-size: 24px
    font-weight: bold
  .stats-label
    font-size: 12px
</style>
s
